<template>
  <div class="home-page">
    <!-- 大图背景 -->
    <div class="hero-section" :style="{ backgroundImage: `url(${heroImage})` }">
      <div class="hero-content">
        <h1 class="hero-title">欢迎来到山海博客</h1>
        <p class="hero-subtitle">探索知识的海洋，发现世界的美好</p>
       
      </div>
    </div>

    <!-- 文章列表组件 -->
    <ArticleList
      :articles="articleList"
      :loading="loading"
      :initial-loading="initialLoading"
      :no-more="noMore"
      :error="error"
      @load-more="loadMoreArticles"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import ArticleList from '@/components/Article/ArticleList.vue';


const heroImage = 'https://static.leiqichao.cn/199.jpg'; // 直接赋值 URL

const { proxy } = getCurrentInstance();

// API 配置
const API_URL = '/api/articles/page';
const PAGE_SIZE = 3;

// 响应式数据
const articleList = ref([]);
const currentPage = ref(0);
const totalArticles = ref(0);
const loading = ref(false);
const initialLoading = ref(true);
const error = ref(null);
const noMore = ref(false);
const isArrowVisible = ref(true);

// 初始化加载
const loadInitialArticles = async () => {
  try {
    initialLoading.value = true;
    const response = await proxy.$axios.post(API_URL, {
      pageNum: 1,
      pageSize: PAGE_SIZE,
      queryParam: { status: 'published' }
    });

    const data = response.data;
    articleList.value = data.records;
    totalArticles.value = data.total;
    currentPage.value = 1;
    checkNoMore(data.records);
  } catch (err) {
    handleError(err);
  } finally {
    initialLoading.value = false;
  }
};

// 加载更多文章
const loadMoreArticles = async () => {
  if (loading.value || noMore.value) return;

  try {
    loading.value = true;
    error.value = null;
    const nextPage = currentPage.value + 1;

    const response = await proxy.$axios.post(API_URL, {
      pageNum: nextPage,
      pageSize: PAGE_SIZE,
      queryParam: { status: 'published' },
      _t: Date.now()
    });

    const data = response.data;
    const newArticles = data.records.filter(
      newArt => !articleList.value.some(oldArt => oldArt.id === newArt.id)
    );
    
    articleList.value = [...articleList.value, ...newArticles];
    currentPage.value = nextPage;
    checkNoMore(data.records);
  } catch (err) {
    handleError(err);
  } finally {
    loading.value = false;
  }
};

// 检查是否还有更多数据
const checkNoMore = (newRecords) => {
  noMore.value = newRecords.length < PAGE_SIZE || 
                (currentPage.value * PAGE_SIZE) >= totalArticles.value;
};

// 错误处理
const handleError = (err) => {
  error.value = '加载失败: ' + (err.response?.data?.message || err.message);
  console.error('文章加载错误:', err);
};

// 滚动到内容区域
const scrollToContent = () => {
  const contentElement = document.querySelector('.article-list');
  if (contentElement) {
    contentElement.scrollIntoView({ behavior: 'smooth' });
  }
};

// 新增滚动处理函数
const handleScroll = () => {
  const scrollY = window.scrollY;
  const visibleHeight = window.innerHeight;
  const pageHeight = document.documentElement.scrollHeight;
  const threshold = 100;

  if (pageHeight - (scrollY + visibleHeight) < threshold) {
    loadMoreArticles();
  }
};

// 生命周期
onMounted(() => {
  loadInitialArticles();
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.home-page {
  width: 100%;
  min-width: 320px;
  margin: 0 auto;
}

.hero-section {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: relative;
}

.hero-content {
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
}

.hero-title {
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: bold;
  animation: fadeInDown 1s ease-out;
}

.hero-subtitle {
  font-size: 24px;
  animation: fadeInUp 1s ease-out;
}

.scroll-down-arrow {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  color: white;
  cursor: pointer;
  animation: bounce 2s infinite;
  padding: 10px 20px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-text {
  font-size: 16px;
  margin-top: 10px;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, 0);
  }
  40% {
    transform: translate(-50%, -20px);
  }
  60% {
    transform: translate(-50%, -10px);
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 18px;
  }

  .scroll-down-arrow {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }
}
</style>